/**
 * Created by Tsuna Cheung on 2016/11/30.
 */
import React, {Component} from 'react';
import {
    Navigator,
    Image,
    Animated
} from 'react-native';

import Login from './Login'

export default class WelcomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            /* 设置透明度（opacity）初始值为1 */
            fadeAnim: new Animated.Value(1)
        };
    }

    /* react-native 生命周期里的自带方法，发生在组件出现后 */
    componentDidMount() {
        /* 页面跳转定时器，设置3秒后跳转 */
        this.timer = setTimeout(() => {
            this._leaptoLogin();
        }, 3000);
        /* 设置动画的执行序列。先执行动画的延时操作（delay）再执行opacity从1到0的动画执行*/
        Animated.sequence([Animated.delay(2300), Animated.timing(this.state.fadeAnim, {toValue: 0},)]).start();
    }

    _leaptoLogin = () => {
        const {navigator}=this.props;
        if (navigator) {
            navigator.push({
                name: 'Login',
                component: Login
            })
        }
    }

    render() {
        return (
            <Animated.View
                style={{opacity: this.state.fadeAnim}}>
                <Image source={require('./../Images/test.jpg')}
                       style={{width: 450, height: 700}}/>
            </Animated.View>
        );
    }
}

